<template>
    <a-modal v-model:open="show" width="300px" :centered="true" title="二维码" :maskClosable="false" :destroyOnClose="true"
        @cancel="closeQR" @ok="closeQR">
        <div style="display: flex;justify-content: center;">
            <a-qrcode :value="$props.text" errorLevel="H" :size="210" />
        </div>
    </a-modal>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
const show = ref(false)
const props = defineProps({
    open: {
        type: Boolean,
        required: true
    },
    text: {
        type: String,
        required: true
    }
})
const emit = defineEmits(['cancel']);
// 关闭弹窗
const closeQR = () => {
    emit('cancel')
}
onMounted(() => {
    watch(() => props.open, (value: boolean) => {
        show.value = value
    })
})

</script>

<style scoped></style>